@mixin auth-user-detail-theme($theme) {
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);

  .user-container {
    padding-top: 1rem;
    display: grid;
    position: relative;
    grid-template-columns: 1fr;

    .user-settings-list {
      position: relative;

      .user-sticky-rel {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 50px;
        padding: 1rem 2rem 1rem 0;

        .setting-list-element {
          border: none;
          background: none;
          text-align: left;
          padding: 0.75rem 0;
          opacity: 0.6;
          font-size: 15px;
          cursor: pointer;
          color: map-get($foreground, text);
          display: flex;
          align-items: center;

          i {
            font-size: 1.2rem;
            height: 1.2rem;
            line-height: 1.2rem;
          }

          &:hover {
            opacity: 1;
          }

          &.mob-only {
            display: none;

            @media only screen and (max-width: 500px) {
              display: flex;
            }
          }

          &.hide-on-mobile {
            @media only screen and (max-width: 500px) {
              display: none;
            }
          }

          &.show {
            display: none;

            @media only screen and (max-width: 500px) {
              display: flex;
            }
          }

          &.active {
            font-weight: 600;
            opacity: 1;
          }
        }
      }
    }

    .user-settings {
      width: 100%;
      overflow-x: auto;
    }

    @media only screen and (min-width: 824px) {
      grid-template-columns: 1fr 1fr 1fr 1fr;

      .user-settings {
        grid-column-start: 2;
        grid-column-end: 5;
      }
    }
  }
}

.user-spinner-wrapper {
  margin: 1rem 0;
}

.icon-button {
  .icon {
    font-size: 1.2rem;
  }
}

.resendemail {
  margin-right: 1rem;
  margin-top: 0.5rem;
}

.side-padding {
  padding-top: 1rem;
}

.delete-account-wrapper {
  display: flex;
  justify-content: flex-end;
}
